<template>
  <view>
    <u-navbar height="50" title="订单详情" title-size="36" title-color="#333"></u-navbar>
    <scroll-view v-if="orderInfo" :scroll-y="true">
      <view class="layoutView">
        <view class="orderStatus dis-flex flex-y-center">
          <text class="flex-1">{{ orderInfo.statusName }}</text>
          <text
            v-if="orderInfo.type === 10"
            style="color: black; font-weight: bold; font-size: 28rpx; margin-right: 20rpx"
            >外卖</text
          >
          <text
            v-if="orderInfo.reserveDate"
            style="color: #cb6501; font-weight: bold; font-size: 28rpx; margin-right: 20rpx"
            >预约</text
          >
          <view v-if="orderInfo.status === 0" style="font-size: 28rpx">
            <text style="margin-right: 10rpx">支付剩余时间</text>
            <u-count-down
              v-if="orderInfo.status === 0"
              :timestamp="payCountDownSeconds"
              :show-border="true"
              font-size="26"
              color="#ff0000"
              border-color="#bb0000"
            >
            </u-count-down>
          </view>
        </view>
        <view class="dis-flex flex-y-between" style="font-size: 28rpx; line-height: 50rpx">
          <view class="flex-1">
            <view
              v-if="orderInfo.deliveryType == 1 || orderInfo.deliveryType == 3"
              class="order-address"
            >
              {{ orderInfo.receiverAreaName }}&nbsp;&nbsp;{{ orderInfo.receiverDetailAddress }}
            </view>
            <view
              v-if="orderInfo.deliveryType == 1 || orderInfo.deliveryType == 3"
              class="order-contacts"
            >
              {{ orderInfo.receiverName }}&nbsp;&nbsp;{{ orderInfo.receiverMobile }}
            </view>
          </view>
          <view
            class="right"
            title="申请退款的条件：已付款+订单未完成+未申请"
            v-if="
              (orderInfo.status === 10 || orderInfo.status === 20) && orderInfo.refundStatus === 0
            "
            @click="onApply"
            >申请退款
          </view>
        </view>
        <view v-if="orderInfo.deliveryType == 4">
          <view class="store-info dis-flex flex-y-between flex-y-center">
            <view class="store-left" style="flex: 1">
              <view>
                {{ orderInfo.shop.name }}
              </view>
              <view class="store-add"> 地址：{{ orderInfo.shop.fullAddress }}</view>
              <view class="store-add"> 电话：{{ orderInfo.shop.contactMobile }}</view>
            </view>
          </view>
          <view v-if="orderInfo.payStatus" class="dis-flex flex-y-between flex-y-center">
            <view class="order-code">
              <view
                v-if="orderInfo.refundStatus === 0 && orderInfo.status !== 30"
                @click="onCopy(orderInfo.verifyCode)"
              >
                <text style="margin-right: 10rpx">{{ formatCode(orderInfo.verifyCode) }}</text>
                <u-icon name="/static/store/fz.png" size="30"></u-icon>
              </view>
              <view v-else style="color: #999999; text-decoration: line-through"
                >{{ formatCode(orderInfo.verifyCode) }}
              </view>
            </view>
            <u-image
              v-if="orderInfo.refundStatus == 0"
              @click="toClerk"
              :src="orderInfo.qrcode"
              width="90rpx"
              height="90rpx"
            ></u-image>
          </view>
        </view>
      </view>
      <view class="layoutView">
        <view
          v-if="orderInfo.shop && orderInfo.shop.name"
          class="layoutText dis-flex flex-y-center"
        >
          <image
            v-if="orderInfo.shop.logo"
            :src="orderInfo.shop.logo"
            style="width: 40rpx; height: 40rpx"
          ></image>
          <text style="margin-left: 10rpx">{{ orderInfo.shop.name }}</text>
          <view class="flex-1"></view>
          <view
            style="color: #10a28f; font-size: 26rpx"
            @click.stop.prevent="onCallPhone(orderInfo.shop.contactMobile)"
          >
            联系商家
          </view>
        </view>
        <text v-else class="layoutText"
          >{{ orderInfo.shop.categoryCode === 'food' ? '菜品信息' : '商品信息' }}
        </text>
        <view class="order-goods" v-for="(item2, index) in goodsList" :key="index">
          <u-image
            class="goods-img"
            border-radius="8"
            :src="item2.picUrl"
            width="160rpx"
            height="160rpx"
          ></u-image>
          <view class="orde-riget" style="flex: 1">
            <view class="goods-title">
              <text>{{ item2.spuName }}</text>
            </view>
            <view class="goods-speci dis-flex flex-x-baseline">
              <text v-if="item2.properties && item2.properties.length > 0"
                >{{ item2.properties[0].valueName }}
              </text>
              <text class="goodsNum" style="margin-left: 20rpx"
                >{{ item2.count }}{{ item2.unitValue > 1 ? 'x' + item2.unitValue : ''
                }}{{ item2.unitName || '' }}
              </text>
              <view class="flex-1"></view>
              <text class="goodsNum" v-if="item2.weight"
                >约{{ (item2.count * item2.weight * 1000).toFixed(0) }}克
              </text>
            </view>
            <view class="goods-price">
              <text>¥{{ (item2.price * 0.01).toFixed(2) }}</text>
              <text
                class="goods-refund"
                v-if="
                  item2.afterSaleStatus === 10 ||
                  item2.afterSaleStatus === 20 ||
                  item2.afterSaleStatus === 30
                "
              >
                退款进行中
              </text>
              <text class="goods-refund" v-else-if="item2.afterSaleStatus === 40">
                等待平台退款
              </text>
              <text class="goods-refund" v-else-if="item2.afterSaleStatus === 50"> 退款成功 </text>
              <text class="goods-refund" v-else> 已终止退款</text>
            </view>
            <!-- <view @click="onApply(item2)" v-if="item2.afterSaleStatus === 0" style="display: inline-block;border-radius: 10rpx; padding: 0 10rpx; border: 2rpx solid black;">
              退款申请
            </view>
            <view v-else @click="onAfterDetail(item2.afterSaleId)" style="display: inline-block;border-radius: 10rpx; padding: 0 10rpx; border: 2rpx solid black;">
              退款详情
            </view> -->
          </view>
        </view>
        <view style="margin-top: 20rpx"></view>
        <u-line color="#E3E4E6"></u-line>
        <view class="moneyView dis-flex flex-y-center flex-y-between">
          <view class="moneyTitle">
            <view>合计</view>
          </view>
          <text style="color: #fa453c">¥{{ (priceTotal * 0.01).toFixed(2) }}</text>
        </view>
        <u-line
          color="#E3E4E6"
          v-if="orderInfo.deliveryType === 1 || orderInfo.deliveryType === 3"
        ></u-line>
        <view class="moneyView" v-if="orderInfo.deliveryType === 1 || orderInfo.deliveryType === 3">
          <view class="moneyTitle">
            <view>{{ orderInfo.deliveryType === 1 ? '运费' : '配送费' }}</view>
          </view>
          <view class="moneyText" v-if="Number(orderInfo.deliveryPrice) > 0"
            >¥{{ (orderInfo.deliveryPrice * 0.01).toFixed(2) }}
          </view>
          <view class="moneyText" v-else>{{ orderInfo.deliveryType === 1 ? '包邮' : '免费' }}</view>
        </view>
        <u-line color="#E3E4E6" v-if="orderInfo.deductPoint > 0"></u-line>
        <view class="moneyView" v-if="orderInfo.deductPoint > 0">
          <view class="moneyTitle">
            <view>积分</view>
          </view>
          <view class="moneyText" style="color: orangered"
            >{{ orderInfo.deductPoint }}积分抵¥{{ (orderInfo.pointPrice * 0.01).toFixed(2) }}
          </view>
        </view>
        <u-line color="#E3E4E6" v-if="orderInfo.deductCryptocurrency > 0"></u-line>
        <view class="moneyView" v-if="orderInfo.deductCryptocurrency > 0">
          <view class="moneyTitle">
            <view>收益豆</view>
          </view>
          <view class="moneyText" style="color: orangered"
            >{{ orderInfo.deductCryptocurrency }}个豆抵¥{{
              (orderInfo.cryptocurrencyPrice * 0.01).toFixed(2)
            }}
          </view>
        </view>
        <u-line color="#E3E4E6" v-if="orderInfo.vipPrice > 0"></u-line>
        <view class="moneyView" v-if="orderInfo.vipPrice > 0">
          <view class="moneyTitle">
            <view>会员价</view>
          </view>
          <view class="moneyText" style="color: orangered"
            >减免¥{{ (orderInfo.vipPrice * 0.01).toFixed(2) }}
          </view>
        </view>
        <u-line color="#E3E4E6" v-if="orderInfo.couponPrice > 0"></u-line>
        <view class="moneyView" v-if="orderInfo.couponPrice > 0">
          <view class="moneyTitle">
            <view>优惠券</view>
          </view>
          <view class="moneyText" style="color: orangered"
            >减免¥{{ (orderInfo.couponPrice * 0.01).toFixed(2) }}
          </view>
        </view>
        <u-line color="#E3E4E6" v-if="orderInfo.adjustPrice > 0"></u-line>
        <view class="moneyView" v-if="orderInfo.adjustPrice > 0">
          <view class="moneyTitle">
            <view>调价</view>
          </view>
          <view class="moneyText" style="color: orangered"
            >¥{{ (orderInfo.adjustPrice * 0.01).toFixed(2) }}
          </view>
        </view>
        <u-line color="#E3E4E6" v-if="orderInfo.discountPrice > 0"></u-line>
        <view class="moneyView" v-if="orderInfo.discountPrice > 0">
          <view class="moneyTitle">
            <view>优惠金额</view>
          </view>
          <view class="moneyText" style="color: orangered"
            >¥{{ (orderInfo.discountPrice * 0.01).toFixed(2) }}
          </view>
        </view>
        <u-line color="#E3E4E6"></u-line>
        <view class="allPriceView">
          <view class="moneyTitle">
            <view>{{ orderInfo.payStatus ? '实付' : '应付' }}</view>
          </view>
          <text class="allPrice" style="color: red"
            >¥{{ (orderInfo.payPrice * 0.01).toFixed(2) }}
          </text>
        </view>
      </view>
      <view class="layoutView" v-if="orderInfo.riderStaff || orderInfo.riderPicUrls">
        <view class="orderTitle dis-flex flex-x-baseline">
          <text>配送员信息</text>
          <view class="flex-1"></view>
          <view
            style="color: #10a28f; font-size: 26rpx"
            @click.stop.prevent="onCallPhone(orderInfo.riderStaff.contactMobile)"
          >
            联系TA
          </view>
        </view>
        <view class="orderText"
          >姓名：{{ orderInfo.riderStaff ? orderInfo.riderStaff.contactName : '无' }}</view
        >
        <view class="orderText"
          >手机号：{{ orderInfo.riderStaff ? orderInfo.riderStaff.contactMobile : '无' }}</view
        >
        <view class="orderText" v-if="orderInfo.riderRemark"
          >备注：{{ orderInfo.riderRemark }}
        </view>
        <view class="orderText" v-if="orderInfo.riderPicUrls && orderInfo.riderPicUrls.length > 0"
          >凭证图片：
        </view>
        <view
          class="orderText"
          v-if="orderInfo.riderPicUrls && orderInfo.riderPicUrls.length > 0"
          style="display: flex; flex-wrap: wrap"
        >
          <u-image
            class="picBox"
            border-radius="10"
            v-for="img in orderInfo.riderPicUrls"
            :src="img"
            :key="img"
            width="150rpx"
            height="150rpx"
          ></u-image>
        </view>
      </view>
      <view class="layoutView" v-if="orderInfo.combinationRecord">
        <view class="orderTitle">拼团信息</view>
        <view class="orderText">记录编号：{{ orderInfo.combinationRecordId }}</view>
      </view>
      <view class="layoutView" v-if="orderInfo.grouponPackage">
        <view class="orderTitle">团购信息</view>
        <view class="orderText">套餐编号：{{ orderInfo.grouponPackageId }}</view>
      </view>
      <view class="layoutView" v-if="orderInfo">
        <view class="orderTitle">订单信息</view>
        <view class="orderText">交易单号：{{ orderInfo.no }}</view>
        <view class="orderText" v-if="orderInfo.deliveryType == 1">配送类型：快递发货</view>
        <view class="orderText" v-if="orderInfo.deliveryType == 2">配送类型：到店自提</view>
        <view class="orderText" v-if="orderInfo.deliveryType == 3">配送类型：同城配送</view>
        <view class="orderText" v-if="orderInfo.deliveryType == 4"
          >{{
            orderInfo.shop.categoryCode === 'food' ? '配送类型：到店自取' : '配送类型：现场核销'
          }}
        </view>
        <view class="orderText"
          >创建时间：{{ $u.timeFormat(orderInfo.createTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="orderInfo.payStatus"
          >付款时间：{{ $u.timeFormat(orderInfo.payTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="orderInfo.acceptedTime"
          >接单时间：{{ $u.timeFormat(orderInfo.acceptedTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="orderInfo.assignedTime"
          >派单时间：{{ $u.timeFormat(orderInfo.assignedTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="orderInfo.packedTime"
          >出餐时间：{{ $u.timeFormat(orderInfo.packedTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="orderInfo.userRemark"
          >订单备注：{{ orderInfo.userRemark }}
        </view>
        <view class="orderText" v-if="orderInfo.deliveryTime"
          >{{ orderInfo.deliveryType === 1 ? '发货时间' : '配送时间' }}：{{
            $u.timeFormat(orderInfo.deliveryTime, 'yyyy年mm月dd日 hh时MM分')
          }}
        </view>
        <view class="orderText" v-if="orderInfo.logisticsName">
          物流公司：{{ orderInfo.logisticsName }}
        </view>
        <view class="orderText" v-if="orderInfo.logisticsNo">
          <view style="flex: 1">物流单号：{{ orderInfo.logisticsNo }}</view>
          <view @click="onCopy(orderInfo.logisticsNo)">复制</view>
        </view>
        <view class="orderText" v-if="orderInfo.receiveTime"
          >{{ orderInfo.deliveryType === 1 ? '收货时间' : '送达时间' }}：{{
            $u.timeFormat(orderInfo.receiveTime, 'yyyy年mm月dd日 hh时MM分')
          }}
        </view>
        <view class="orderText" v-if="orderInfo.finishTime"
          >完成时间：{{ $u.timeFormat(orderInfo.finishTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="orderInfo.cancelTime"
          >关闭时间：{{ $u.timeFormat(orderInfo.cancelTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view
          class="orderText"
          v-if="(orderInfo.type === 10 || orderInfo.type === 20) && orderInfo.dinePeoples"
          >用餐人数：{{ orderInfo.dinePeoples }}人
        </view>
        <view class="orderText" v-if="orderInfo.reserveDate"
          >预约时间：{{ $u.timeFormat(orderInfo.reserveDate, 'yyyy年mm月dd日') }}
          {{ orderInfo.reservePeriod }}
        </view>
      </view>
      <u-gap height="200"></u-gap>
    </scroll-view>
    <view v-if="orderInfo" class="footer-box">
      <view class="bottomView">
        <text class="hollow-btn btn" @click="$utils.goToUserCenter()">个人中心</text>
        <text
          class="warning-btn btn"
          v-if="orderInfo.status === 0"
          @click="onOrderCancel(orderInfo)"
          >取消订单
        </text>
        <text class="solid-btn btn" v-if="orderInfo.status === 0" @click="onOrderPayment(orderInfo)"
          >立即支付
        </text>
        <text
          class="hollow-btn btn"
          @click="onExpress"
          v-if="orderInfo.status == 10 && orderInfo.deliveryType == 1"
          >查看物流
        </text>
        <text
          class="solid-btn btn"
          @click="toClerk"
          v-if="
            orderInfo.status == 20 && orderInfo.deliveryType == 4 && orderInfo.refundStatus === 0
          "
          >去核销
        </text>
        <text
          class="solid-btn btn"
          v-if="orderInfo.status == 20 && orderInfo.deliveryType == 1"
          @click="onOrderConfrim()"
          >确认收货
        </text>
        <text
          class="solid-btn btn"
          v-if="orderInfo.status == 30 && !orderInfo.commentStatus"
          @click="onComment()"
          >立即评价
        </text>
        <view class="hollow-btn btn" v-if="orderInfo.refundStatus !== 0" @click="onReturnDetail()">
          售后详情
        </view>
        <view
          class="danger-btn btn"
          v-if="orderInfo.status == 40"
          @click.stop.prevent="onDelete(item)"
        >
          立即删除
        </view>
      </view>
    </view>

    <u-popup
      v-if="orderInfo"
      :closeable="true"
      close-icon-pos="top-left"
      v-model="show2"
      mode="bottom"
      height="auto"
      border-rad
      border-radius="15"
    >
      <view class="popup-box">
        <view class="popup-title"> 发表评论</view>
        <view class="goods-start">
          <text>{{ orderInfo.shop.categoryCode === 'food' ? '菜品评价' : '商品评价' }}</text>
          <view class="start-bar">
            <u-rate size="50" active-color="#FBC258" v-model="form.scores"></u-rate>
          </view>
        </view>
        <view class="">
          <view class="">
            评论内容
            <text style="color: #999999">（至少15字以上）</text>
          </view>
          <u-input
            type="textarea"
            v-model="form.content"
            placeholder="满足您的期待吗？说说优点和美中不足吧。"
            maxlength="200"
            height="80"
            :border="true"
            :clearable="true"
          ></u-input>
          <!-- 快捷标签部分 -->
          <view class="quick-tags">
            <view class="tags-title">快捷输入标签：</view>
            <view class="tags-container">
              <view
                v-for="(tag, index) in quickTags"
                :key="index"
                class="tag-item"
                :class="{ active: selectedTags.includes(tag) }"
                @click="toggleTag(tag)"
              >
                {{ tag }}
              </view>
            </view>
          </view>
        </view>
        <view class="image-group">
          <view class="">
            图片
            <text style="color: #999999">（{{ fileList ? fileList.length : 0 }}/3）</text>
          </view>
          <view class="" style="margin-top: 20rpx">
            <u-upload
              :custom-btn="true"
              :action="action"
              max-count="3"
              ref="uUpload"
              :file-list="fileList"
              :before-upload="beforeFileUpload"
              @on-remove="onFileRemove"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <u-icon name="/static/xj.png" size="80"></u-icon>
                <view style="color: #999999">添加照片</view>
              </view>
            </u-upload>
          </view>
        </view>
        <view class="" style="margin-bottom: 100rpx"></view>
        <view class="fixed-wapper">
          <view class="submit-btn" @click="pushComment"> 提交评价</view>
        </view>
      </view>
    </u-popup>

    <PayPopup v-if="orderInfo" ref="payPopupRef" @close="closePay">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ realPay }}
      </p>
    </PayPopup>
  </view>
</template>

<script>
import PayPopup from '@/components/PayPopup.vue'
import { BASE_URL, UP_URL } from '@/common/config'

export default {
  components: {
    PayPopup
  },
  data() {
    return {
      show2: false,
      orderId: '',
      orderInfo: null,
      resStatus: '',
      payOrderId: '',
      realPay: '',
      action: BASE_URL + UP_URL,
      fileList: [],
      starNum: [1, 2],
      starNum2: [1, 2, 3],
      goodsList: [],
      leval: '',
      quickTags: ['配送速度快', '包装完美', '味道好', '分量足', '服务态度好', '食材新鲜'],
      selectedTags: [],
      form: {
        content: '',
        scores: 5,
        orderId: null,
        picUrls: []
      }
    }
  },
  onLoad(res) {
    this.orderId = res.id ? res.id : ''

    if (this.starNum.length < 2) {
      this.leval = '差'
    } else if (this.starNum.length < 4) {
      this.leval = '一般'
    } else {
      this.leval = '优秀'
    }
  },
  onShow() {
    this.initData()
  },
  computed: {
    payCountDownSeconds() {
      if (this.orderInfo && !this.orderInfo.payStatus) {
        return (this.orderInfo.payExpireTime - new Date().getTime()) / 1000
      }
      return 0
    },
    priceTotal: function () {
      let price = 0
      this.goodsList.forEach((item) => {
        price += item.price * item.count
      })
      return price
    }
  },
  methods: {
    formatCode(code) {
      return code
        .replace(/\s/g, '')
        .replace(/[^\d]/g, '')
        .replace(/(\d{3})(?=\d)/g, '$1 ')
    },
    initData() {
      let self = this
      self.$u.get('/app-api/trade/order/get-detail?id=' + self.orderId).then((res) => {
        if (res.code !== 0) {
          self.$u.toast(res.msg)
          return
        }
        self.orderInfo = res.data
        self.goodsList = res.data.items
      })
    },
    onLocation(lat, lng) {
      uni.openLocation({
        latitude: Number(lat),
        latitude: Number(lng),
        success() {}
      })
    },
    onCallPhone(phone) {
      // #ifdef H5
      this.onCopy(phone)
      // #endif
      // #ifndef H5
      uni.makePhoneCall({
        phoneNumber: phone,
        fail(res) {
          uni.$u.toast(JSON.stringify(res))
        }
      })
      // #endif
    },
    onComment() {
      this.show2 = true
    },
    onReturnDetail() {
      this.$utils.route({
        url: '/goods/order-details/order-refund-details',
        params: {
          id: this.orderInfo.id
        }
      })
    },
    onCopy(number) {
      let self = this
      uni.setClipboardData({
        data: number,
        success: function () {
          self.$u.toast('复制成功')
        }
      })
    },
    onOrderCancel() {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u
          .get('/app-api/trade/order/cancel', {
            id: this.orderInfo.id
          })
          .then((res) => {
            self.$u.toast('取消成功')
            setTimeout(function () {
              self.onOrderLoad(self.current, null, true)
            }, 500)
          })
      })
    },
    onOrderPayment() {
      this.payOrderId = this.orderInfo.no
      this.realPay = (this.orderInfo.payPrice * 0.01).toFixed(2)
      this.$refs.payPopupRef.open(this.payOrderId, '', this.orderInfo.payPrice === 0)
    },
    closePay() {
      this.initData()
    },
    onOrderConfrim() {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认已收货吗？', () => {
        self.$u.post('/app-api/trade/order/receive?id=' + this.orderInfo.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            uni.navigateBack()
          }, 500)
        })
      })
    },

    onApply() {
      this.$utils.route(
        '/other/apply-after-sales/apply-after-sales?id=' +
          this.orderId +
          '&goodsJson=' +
          JSON.stringify(this.goodsList)
      )
    },
    toClerk() {
      if (this.orderInfo.qrcode) {
        uni.setStorageSync('verify_qrcode', this.orderInfo.qrcode)
      }
      this.$utils.route('/goods/order-qrcode/order-qrcode?verifyCode=' + this.orderInfo.verifyCode)
    },

    onAfterDetail(id) {
      this.$utils.route('/other/after-sales/after-sales?id=' + id + '&status=1')
    },

    onExpress() {
      uni.navigateTo({
        url:
          '/other/express-process/express-process?id=' +
          this.orderInfo.id +
          '&goodsJson=' +
          JSON.stringify(this.orderInfo.items[0])
      })
    },
    onDelete() {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认删除吗？', () => {
        self.$u.get('/app-api/trade/order/delete?id=' + self.orderInfo.id).then((res) => {
          self.$u.toast('删除成功')
          setTimeout(() => {
            uni.redirectTo({
              url: '/goods/order-list/order-list'
            })
          }, 500)
        })
      })
    },
    toggleTag(tag) {
      const index = this.selectedTags.indexOf(tag)
      if (index > -1) {
        // 如果标签已选中，则移除
        this.selectedTags.splice(index, 1)
      } else {
        // 如果标签未选中，则添加
        this.selectedTags.push(tag)
      }
      // 将选中的标签添加到评论内容中
      this.updateContentWithTags()
    },
    updateContentWithTags() {
      // 保留用户手动输入的内容，只更新标签部分
      let content = this.form.content
      // 移除之前添加的标签（如果有）
      this.quickTags.forEach((tag) => {
        const tagWithBrackets = `【${tag}】`
        content = content.replace(tagWithBrackets, '')
      })
      // 清理多余空格和换行
      content = content.trim()
      // 添加当前选中的标签
      if (this.selectedTags.length > 0) {
        const tagsText = this.selectedTags.map((tag) => `【${tag}】`).join('')
        content = tagsText + content
      }
      this.form.content = content
    },
    beforeFileUpload(_index, list) {
      this.fileList = list
    },
    onFileRemove(_index, list) {
      this.fileList = list
    },
    pushComment() {
      let self = this
      self.form.orderId = self.orderId
      self.$refs.uUpload.lists.forEach((val) => {
        self.form.picUrls.push(val.response.data)
      })
      if (self.form.scores == 0) {
        self.$u.toast('评价最低为1分')
        return
      }
      if (self.form.content == '') {
        self.$u.toast('请输入评价内容')
        return
      }
      self.$u.post('/app-api/product/comment/create', self.form).then((res) => {
        if (res.code === 0) {
          self.form.content = ''
          self.form.scores = 5
          self.form.orderId = null
          self.form.picUrls = []
          self.show2 = false
          self.initData()
        } else {
          self.$u.toast(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import url('@/style/btn.css');
@import url('./order-details.css');

page {
  background: #f2f2f2;
}

.submit-btn {
  width: 94%;
}

.right {
  width: 150rpx;
  height: 60rpx;
  border-radius: 30rpx;
  border: 1px solid #e6e6e6;
  line-height: 60rpx;
  color: #666666;
  text-align: center;
}

.store-info {
  margin-bottom: 20rpx;

  .store-left {
    font-size: 30rpx;

    .store-add {
      font-size: 24rpx;
      color: #666666;
    }
  }
}

.order-code {
  font-weight: 600;
  font-size: 36rpx;
  color: #333333;
}

.slot-btn {
  width: 200rpx;
  height: 200rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.quick-tags {
  margin-top: 20rpx;

  .tags-title {
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 15rpx;
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;

    .tag-item {
      padding: 5rpx 20rpx;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      border: 1px solid #10a28f;
      font-size: 24rpx;
      color: #10a28f;

      &.active {
        background-color: #10a28f;
        color: #ffffff;
      }
    }
  }
}

.image-group {
  margin-top: 30rpx;
}
</style>
